
<template>
    <div class="edit_wrap">
        <div class="header">
            定制
            <div class="save">保存</div>
        </div>
        <div class="svg_containers">
            <svg id="svg_container_wrap" width="375" height="375" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs">
                <defs></defs>
                <svg id="svg_container_inner" viewBox="0 0 1000 1000" width="375" height="375" x="0" y="0" style="overflow: visible;">
                    <g id="svg_bg">
                        <!-- m0_  背景图片  -->
                        <image id="m0_111"  xlink:href="../assets/img/bg.jpg"  width="1000" height="1000" transform="matrix(1,0,0,1,0,0)"></image>
                    </g>
                    <mask id="mask">
                        <image id="mask_img" xlink:href="" width="369" height="547" transform="matrix(1,0,0,1,327,270)"></image>
                    </mask>
                    <g id="svg_layer" mask="url(#mask)">
                        <!-- m1_  用户图片  -->
                        <image id="m1_111" xlink:href="https://imgex.cmall.com/imgsrv/diyrelease/cmall/o_1ce8o6u001lum1q6tp4c6jt8gikt.jpg" width="320" height="320" transform="matrix(1,0,0,1,220,200)"></image>
                        <!-- m2_  素材图片  -->
                        <image id="m2_111" width="320" height="320" transform="matrix(0,0,0,1,320,200)"></image>
                    </g>
                    <path id="SvgjsPath1044" d="M327 270L696 270L696 817L327 817ZM327 452.33333333333337L696 452.33333333333337ZM450 270L450 817ZM327 634.6666666666667L696 634.6666666666667ZM573 270L573 817ZZ " stroke="#cccccc" fill="none" pointer-events="none" stroke-width="2.6666666666666665" stroke-dasharray="21.333333333333332,8" data-name="path" style="/* display: none; */"></path>
                    
                    <g id="SvgjsG1049">
                        <path id="SvgjsPath1050" d="M327 241.6666463216146L696.0000152587891 241.6666463216146L696.0000152587891 610.6666615804037L327 610.6666615804037Z " stroke="#000000" fill="none" stroke-width="1" stroke-dasharray="21.333333333333332,8" data-name="path"></path>
                        <image id="SvgjsImage1051" xlink:href="" width="80" height="80" x="287" y="201.6666463216146" data-name="remove"></image>
                        <image id="SvgjsImage1052" xlink:href="" width="80" height="80" x="656.0000152587891" y="570.6666615804037" data-name="rotate"></image>
                    </g>
                </svg>
            </svg>
        </div>

        <div class="footerBar" :class="{'show':!showMaterials}">
            <div class="footerSection album">相册</div>
            <div class="footerSection material" @click="showMaterial()">素材</div>
        </div>
        <div class="material_wrap" :class="{'show':showMaterials}">
            <div class="mate_header">
                <div class="sureBtn" @click="showMaterial()"></div>
            </div>
            <div class="material_list">
                <ul>
                    <li>
                        <span>
                            <img :src="materialIcon" alt="">
                        </span>
                    </li>
                </ul>
            </div>
            <div class="material_tab">推荐</div>
        </div>
    </div>

</template>

<script>
import common from '@/lib/editCommon'
import editCore from '@/lib/editCore'
import "@/assets/less/edit.less";
import materialIcon from "@/assets/img/icon_rotate@3x.png";
import bgImg from "@/assets/img/bg.jpg";
export default {
    name:"edit",
    data(){
        return{
            query:this.$route.query,
            svgInfo:'',
            materialIcon:materialIcon,
            bgImg:bgImg,
            showMaterials :false,
        }
    },
    mounted(){

    },
    methods:{
        showMaterial(){
            this.showMaterials = !this.showMaterials;
        }
    }
    
}
</script>

